<script setup lang="ts">
import menuData from "@/virtulDB/common/menu.json"
import menuContent from "@/virtulDB/common/menuContent.json"
import { ref,defineProps,defineEmits,defineExpose } from "vue"
let menuList = ref(menuData.menuList)
//注意defineEmits的声明只能写在最顶层，然后函数内调用，不能直接定义在局部函数内部
const emits = defineEmits(['activeMenu'])
const clickHandle = function(subItem) {
  menuList.value.forEach((element) => {
    //选中菜单
    for (let i = 0; i < element.children.length; i++) {
      element.children[i].isActive =
        element.children[i].menuId == subItem.menuId;
    }
  })
  //选中菜单的父组件回调事件
  // 添加 menuIn 和 menuIntroduce字段
  menuContent.forEach((element)=>{
    if(element.menuName == subItem.menuName){
        subItem.menuIn = element.menuIn
        subItem.menuIntroduce = element.menuIntroduce
    }
  })

  emits('activeMenu',subItem)
}
</script>
<template>
  <main class="sys-menu-main">
    <div v-for="(item, index) in menuList" :key="index">
      <div v-if="item.menuIcon != ''"></div>
      <div class="group">
        <span>{{ item.menuLabel }}</span>
      </div>
      <div
        class="item"
        v-for="(subItem, subIndex) in item.children"
        :key="subItem.menuId"
        :class="subItem.isActive ? 'active' : ''"
        @click="clickHandle(subItem)"
      >
        <div v-if="subItem.menuIcon != ''"></div>
        <div>
          <span>{{ subItem.menuLabel }}</span>
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="less" scoped>
.sys-menu-main {
  div {
    .group span {
      font-size: 1rem;
      font-weight: bolder;
    }
  }

  .item {
    padding-left: 1vw;
    margin-top: 0.2rem;
    border-radius: 10px;
    font-size: 0.9rem;
  }
  .item:hover {
    span {
      font-weight: bolder;
    }
    background-color: rgba(87,175,187,0.1);
  }
  .item.active {
    span {
      font-weight: bolder;
    }
    background-color: rgba(87,175,187,0.1);
  }
}
</style>